<template>
	<view class="draw-area">
		<u-button  size="medium" type="primary" @click="drawArea">{{dataSource.length > 0 ? type == 2 ? '已绘制' : '已绘制' : btnText}}
		</u-button>
	</view>
</template>
<script>
	export default {
		name: "drawArea",
		model: {
			prop: 'location',
			event: 'change'
		},
		props: {
			location: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			btnText: {
				type: String,
				default: '绘制区域'
			},
			type: {
				type: [Number, String],  // 1打点  2绘制
				default: 2
			},
			unikey: {
				type: [Number, String],
				default: '',
			}
		},
		data() {
			return {
				dataSource: [],
			};
		},
		watch: {
			location(newData){
				this.init(newData);
			}
		},
		methods: {
			drawArea() {
				// if(this.disabled) return;
				uni.navigateTo({
					url: `/components/map/map?unikey=${this.unikey}&type=${this.type}&disabled=${this.disabled ? 1 : 0}&locations=${JSON.stringify(this.dataSource)}`
				})
			},
			saveArea(data) {
				if(this.unikey == data.unikey){
					this.dataSource = data.location;
					this.$emit('change',JSON.stringify(data.location));
				}
			},
			init(data){
				if (data != '' && data != null) {
					this.dataSource = JSON.parse(data);
				}
			}
		},
		mounted() {
			this.init(this.location);
			//监听 uni 监听函数
			uni.$on("saveArea", this.saveArea);
		},
		beforeDestroy() {
			//移除监听
			uni.$off('saveArea', this.saveArea)
		}
	}
</script>
<style lang="scss" scoped>

</style>
